<template>
	<view class="comment-item d-flex">
		<u-avatar size="90rpx"></u-avatar>
		
		<view class="right-content flex-grow-1">
			<view class="flex-between" style="height: 90rpx;">
				<view class="flex-align">
					<view style="margin-right: 30rpx;">{{ data.name }}</view>
					<u-rate :count="5" :value="data.rate" activeColor="#FFBA00" size="17" readonly></u-rate>
				</view>
				<view class="date">{{ data.date }}</view>
			</view>
			
			<view class="content">
				{{ data.content }}
			</view>
			
			<view class="image-list d-flex flex-wrap" v-if="data.image">
				<view class="image"
					v-for="(img, index) in data.image"
					:key="index"
				>
					<u-image
						:src="img"
						width="180rpx"
						height="180rpx"
						radius="10rpx"
					/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		data: {
			type: Object,
			required: true
		}
	}
}
</script>

<style lang="scss" scoped>
.comment-item {
	padding: 25rpx 30rpx;
	
	.right-content {
		margin-left: 30rpx;
		
		.date {
			font-size: 24rpx;
			color: #BEBEBE;
		}
		
		.content {
			margin: 20rpx 0 28rpx;
			font-size: 26rpx;
		}
		
		.image-list {
			margin-left: -14rpx;
			
			.image {
				margin-left: 14rpx;
				margin-bottom: 14rpx;
			}
		}
	}
}
</style>
